// @ts-nocheck
import React, { useEffect, useRef } from 'react'
import avatar from '../../assets/images/avatar.png';
import { imageUri } from '../../constants/Uri';
import icon_setting from '../../assets/images/icon_setting.png'
import { Image, StyleSheet, View } from 'react-native';


/* 
- source           获取图片的远程地址
- defaultSource    在读取图片时默认显示的图片


Image.getSize   获取图片的尺寸  只能用于远程 理论上也可以实现 预加载
Image.prefetch  图片预加载
*/


export default function ImageDemo() {

  const imgRef = useRef(null)

  useEffect(() => {
    Image.getSize(imageUri, (width, height) => {
        console.log(`width=${width}, height=${height}`);
    }, (error) => {
        console.log(error);
    });

    Image.prefetch(imageUri).then(data => {
      console.log(data);
      
    }).catch(e => {
      console.log(e);
    })
  }, []);

  return (
    <View style={styles.root}>
      {/* @ts-ignore */}
      <Image
        style={styles.img}
        ref={imgRef}
        source={icon_setting}
        defaultSource={avatar}
      >

      </Image>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#F5F5F5'
  },
  img: {
    width: 240,
    height: 240,
    tintColor: 'blue',
  },
})
